<template>
	<view class="tab-bar-container">
		<view class="tab-bar">
			<view class="tab-item" v-for="(item, index) in tabs" :key="index" @click="switchTab(item, index)">
				<!-- 中间特殊按钮 -->
				<template v-if="item.special">
					<view class="special-button-placeholder"></view>
					<view class="special-button">
						<image class="special-icon" :src="item.iconPath" mode="aspectFit"></image>
					</view>
					<text class="special-text">{{ item.text }}</text>
				</template>
				<!-- 普通 Tab 项 -->
				<template v-else>
					<image class="tab-icon" :src="tabIndexs == index ? item.selectedIconPath : item.iconPath"
						mode="aspectFit"></image>
					<text class="tab-text" :class="{ 'active-text': tabIndexs == index }">{{ item.text
					}}</text>
				</template>
			</view>
		</view>
		<view class="safe-area"></view>
	</view>
</template>

<script>
export default {
	name: "BottomTabBar",
	props: {
		color: {
			default: "#fff",
		},
		scrollStatus: {
			type: Boolean,
			default: true
		},
		tabIndexs: {
			type: Number,
			default: 0
		}
	},
	data() {

		return {
			userRole: '03', // 默认角色为企业端，以匹配图片
			currentPage: '/pages/home/home', // 默认当前页
			// 牛人端 Tabs

			// 企业端 Tabs (与图片一致)
			companyTabs: [
				{ linkUrl: "/pages/home/home", text: "首页", iconPath: "/static/img/nav/home.png", selectedIconPath: "/static/img/nav/home_cur.png" },
				{ linkUrl: "/pages/serve/indexCom", text: "服务", iconPath: "/static/img/nav/sv.png", selectedIconPath: "/static/img/nav/sv_cur.png" },
				{ linkUrl: "/pages/resume/publish", text: "发布岗位", iconPath: "/static/img/nav/plus.png", special: true },
				{ linkUrl: "/pages/message/message", text: "消息", iconPath: "/static/img/nav/meg.png", selectedIconPath: "/static/img/nav/meg_cur.png" },
				{ linkUrl: "/pages/mine/users", text: "我的", iconPath: "/static/img/nav/mine.png", selectedIconPath: "/static/img/nav/mine_cur.png" },
			],
		};
	},
	computed: {
		tabs() {
			return this.companyTabs;
		}
	},
	created() {
		// 动态获取当前页面路径
		const pages = getCurrentPages();
		if (pages.length > 0) {
			this.currentPage = '/' + pages[pages.length - 1].route;
		}

		// 从本地存储中获取用户角色
		const role = uni.getStorageSync('userRole');
		if (role) {
			this.userRole = role;
		} else {
			// 如果本地没有，可以设置一个默认角色

		}

		// 隐藏原生tabbar
		uni.hideTabBar();
	},
	methods: {
		switchTab(item, i) {
			const url = item.linkUrl;
			let _this = this
			// _this.$emit('update:tabIndexs', i);

			if (item.special) {
				uni.showModal({
					title: '提醒',
					content: '更多职位招聘信息，请到薪岗通app进行查看与设置',
					showCancel: false,
					confirmColor: '#37AF71',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			} else {
				uni.switchTab({ url });
			}
		}
	},
	mounted() {
		this.$nextTick(() => {
			const query = uni.createSelectorQuery().in(this);
			query.select('.bottom-tab-bar').boundingClientRect(data => {
				if (data && data.height) {
					// 设置到根节点
					document.documentElement.style.setProperty('--tabbar-height', data.height + 'px');
				}
			}).exec();
		});
	},
	// 页面切换后自动高亮当前tab
	watch: {
		// 监听路由变化（H5端）
		'$route'(to) {
			if (to && to.path) {
				this.currentPage = to.path;
			}
		}
	},
	// 小程序端页面切换后自动高亮
	onShow() {
		const pages = getCurrentPages();
		if (pages.length > 0) {
			this.currentPage = '/' + pages[pages.length - 1].route;
		}
	}
};
</script>

<style lang="scss" scoped>
.tab-bar-container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background-color: #ffffff;
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04);
	font-size: 12px;
}

.tab-bar {
	display: flex;
	height: 60px;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
}

// 普通 Tab
.tab-icon {
	width: 24px;
	height: 24px;
	margin-bottom: 3px;
}

.tab-text {
	font-family: "PingFang SC", sans-serif;
	font-weight: Regular;
	line-height: 1.4;
	color: rgba(17, 17, 17, 1);
}

.active-text {
	color: #00C86A; // 主题绿色
}

// 中间特殊按钮
.special-button-placeholder {
	// 这个元素用于占位，让flex布局保持均匀
	width: 100%;
	height: 100%;
}

.special-button {
	position: absolute;
	top: -18px; // 向上凸起
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: rgba(234, 254, 249, 1); // 浅绿色背景
	display: flex;
	justify-content: center;
	align-items: center;
	border: 4px solid #FFFFFF; // 白色描边，使其与tabbar分离
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
}

.special-icon {
	width: 28px;
	height: 28px;
	color: #00C86A;
}

.special-text {
	position: absolute;
	bottom: 8px;
	font-family: "PingFang SC", sans-serif;
	font-weight: 400;
	line-height: 1.4;
	color: #111111;
}

.safe-area {
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
	background-color: #ffffff;
}
</style>